<template>
	<button @click="handleClick" class="uwo-button" :class="classObj">
		<view style="display: flex; align-items: center; flex-direction: row">
			<uwo-icon name="loading1" v-if="loading" class="uwoIconfont-spin"></uwo-icon>
			<slot></slot>
		</view>
	</button>
</template>
<script>
/**
 * Button 按钮
 * @description Button 按钮
 *
 * @property {String} shape=[default|round|circle]  形状，默认，圆角，圆形
 * @property {String} size=[xs|sm|md|lg|xl]  组件尺寸。可选项：xs|sm|md|lg|xl
 * @property {String} theme=[default|primary|success|warning|error]  组件风格，依次为品牌色、危险色。可选项：default|primary|success|warning|error
 * @property {Boolean} ghost=[true|false]  是否为幽灵按钮（镂空按钮）
 * @property {Boolean} disabled=[true|false] 禁用状态
 * @property {Boolean} loading=[true|false] 加载状态
 */
export default {
	name: 'uwoButton',
	emits: ['click'],
	props: {
		shape: {
			type: String,
			default: 'default'
		},
		size: {
			type: String,
			default: 'md'
		},
		theme: {
			type: String,
			default: 'default'
		},
		ghost: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		classObj() {
			return [
				this.shape,
				this.size,
				'uwo-button__bg-' + this.theme,
				this.ghost ? 'uwo-button__bg-line' : '',
				this.disabled ? 'uwo-button__disabled' : '',
				this.loading ? 'uwo-button__loading' : ''
			];
		}
	},
	methods: {
		handleClick(e) {
			if (!this.disabled && !this.loading) {
				this.$emit('click', e);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
@mixin borderline() {
	content: ' ';
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid currentColor;
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: 12upx;
	z-index: 1;
	pointer-events: none;
}
@mixin theme($color, $bg-color, $border-color) {
	background-color: $bg-color;
	color: $color;
	&::after {
		display: none;
	}
	&.uwo-button__bg-line {
		color: $border-color;
		background-color: transparent;
		&::after {
			@include borderline();
			border-style: solid;
			border-color: $border-color;
		}
	}
}

@mixin btn-size($font-size, $padding, $height) {
	font-size: $font-size;
	padding-left: $padding;
	padding-right: $padding;
	height: $height;
	line-height: $height;
	&.circle {
		width: $height;
	}
}

.uwo-button {
	position: relative;
	border: 0upx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 16px;
	font-size: var(--uwo-font-size-m, 16px);
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin-left: initial;
	transform: translate(0upx, 0upx);
	margin-right: initial;
	&__bg-default {
		@include theme(var(--uwo-text-color-base, #333), var(--uwo-bg-color-grey, #e7e7e7), var(--uwo-bg-color-grey, #e7e7e7));
		&.uwo-button__bg-line {
			color: var(--uwo-text-color-base, #333);
			background-color: transparent;
			&::after {
				@include borderline();
				border-style: solid;
				border-color: var(--uwo-bg-color-grey, #e7e7e7);
			}
		}
	}
	&__bg-primary {
		@include theme(var(--uwo-text-color-inverse, #ffffff), var(--uwo-color-primary, #00b0ff), var(--uwo-color-primary, #00b0ff));
	}
	&__bg-success {
		@include theme(var(--uwo-text-color-inverse, #ffffff), var(--uwo-color-success, #76ff03), var(--uwo-color-success, #76ff03));
	}
	&__bg-warning {
		@include theme(var(--uwo-text-color-inverse, #ffffff), var(--uwo-color-warning, #ff9100), var(--uwo-color-warning, #ff9100));
	}
	&__bg-error {
		@include theme(var(--uwo-text-color-inverse, #ffffff), var(--uwo-color-error, #ff1744), var(--uwo-color-error, #ff1744));
	}
	&__disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
	&__before {
		&:before {
			display: none;
		}
	}
}

.uwo-button:not([class*='bg-']) {
	background-color: #f0f0f0;
}

.uwo-button.round {
	border-radius: 5000upx;
}

.uwo-button.xs {
	@include btn-size(12px, 8px, 28px);
}

.uwo-button.sm {
	@include btn-size(14px, 12px, 32px);
}

.uwo-button.lg {
	@include btn-size(18px, 20px, 48px);
}
.uwo-button.xl {
	@include btn-size(20px, 24px, 56px);
}

.uwo-button.circle {
	width: 40px;
	height: 40px;
	border-radius: 500upx;
	padding: 0;
}

.uwo-button.button-hover {
	transform: translate(1upx, 1upx);
}
</style>
